/*
 * @Author: wwssaabb
 * @Date: 2021-02-27 08:18:45
 * @LastEditTime: 2021-03-03 16:24:08
 * @FilePath: \sass_demo\Visual Block\js\main.js
 */

let btn=document.getElementsByClassName('btn')[0]
let childrenArr=btn.children
Array.from(childrenArr).forEach(a=>{
  a.style.height=btn.offsetHeight/2+'px'
  a.style.width='50%'
  let w=(btn.offsetWidth/2).toFixed(2)
  let h=(btn.offsetHeight/2).toFixed(2)
  a.addEventListener('mousemove',(e)=>{
    let x=e.pageX-e.target.parentElement.offsetLeft
    let y=e.pageY-e.target.parentElement.offsetTop
    const ax_scale=50/w
    const ay_scale=50/h
    let x_f=Math.abs(x-w)
    let y_f=Math.abs(y-h)
    if(x<w && y<h){
      btn.style=`transform:rotateX(-${y_f*ay_scale}deg) rotateY(${x_f*ax_scale}deg);`
    }else if(x>=w && y<h){
      btn.style=`transform:rotateX(-${y_f*ay_scale}deg) rotateY(-${x_f*ax_scale}deg);`
    }else if(x<w && y>=h){
      btn.style=`transform:rotateX(${y_f*ay_scale}deg) rotateY(${x_f*ax_scale}deg);`
    }else{
      btn.style=`transform:rotateX(${y_f*ay_scale}deg) rotateY(-${x_f*ax_scale}deg);`
    }

    a.addEventListener('mouseout',(e)=>{
      setTimeout(()=>{
        btn.style=`transform:rotateX(0deg) rotateY(0deg);transition:1s;`
      },1000)
    })
  })
})
